import { ref, reactive, defineComponent, watch } from 'vue';
import { Modal, Form, Input, Button } from 'ant-design-vue';

export default defineComponent({
  name: 'AddDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['cancel'],
  setup(props, { emit }) {
    const open = ref(false);
    watch(
      () => props.visible,
      (newVal) => {
        open.value = newVal;
      },
    );

    const handleOk = () => {
      console.log(formData);
    };

    const handleCancel = () => {
      emit('cancel');
    };

    // 自定义头部
    const title = () => {
      return <div>添加任务</div>;
    };

    // 表单
    const formData = reactive({
      name: '',
      age: '',
    });
    const form = () => {
      return (
        <div>
          <Form form={form.value}>
            <Form.Item>
              <Input  v-model:value={formData.name} placeholder='请填写姓名' />
            </Form.Item>
            <Form.Item>
              <Input  v-model:value={formData.age} placeholder='请填写年龄' />
            </Form.Item>
          </Form>
        </div>
      );
    };

    return () => (
      <Modal title={title()} open={open.value} onOk={() => handleOk()} onCancel={() => handleCancel()}>
        {form()}
      </Modal>
    );
  },
});
